<template>
    <div class="bg"> 
        <topNav txt=" " :mode="model" @showMode='showMode'></topNav>
        <div class="disfja_cent">
            <img src="../../../static/images/me/headimg.png" alt="" class="heardimg">
            <span>最熟悉的陌生人</span>
        </div>
        <div class="disfja_rba">
            <span>距离：两公里以内</span>
            <span>地区：澳大利亚 哈哈</span>
        </div>
        <div class="disfja_rca" v-if='model == 1'>
            <span @click="skips('/remarks')">备注名</span>
            <span @click="skips('/Msgquanxian')">朋友权限</span>
        </div>
        <div class="verif_box" v-if='model == 1'>
          <div>最熟悉的陌生人:嗨，都是附近啊</div>
          <span @click="showreply = true">回复</span>
        </div>
        <div class="list_box jub border_top" @click="skips('/remarks') " v-if='model == 2'> 
            <span class="title"> 备注</span>
             <van-icon name="arrow" color="#797979"  size="20" />
        </div>
        <div class="life_box" @click="skips('/sharelife')">
            <span>生活圈</span>
            <div class="life_img">
                <img src="../../../static/images/me/headimg.png" alt="" v-for="item in 5" :key="item">
            </div>
            <van-icon name="arrow" color="#797979" class="more_icon" size="20" />
        </div>
        <div class="list_box">
            <span class="title"> 个性签名</span>
            <span class="conter">不求人好感，不惧人难堪</span>
        </div>
         <div class="list_box">
            <span class="title"> 来源</span>
            <span class="conter">附近的人</span>
        </div>
        <div class="list_box jub" @click="skips('/tousu') ">
            <span class="title"> 举报</span>
             <van-icon name="arrow" color="#797979"  size="20" />
        </div>
        <div class="bott_box" @click="skips('/passverif')" v-if="model == 1"> 前往验证</div>
<div class="bott_box" @click="skips('/sayhello')" v-if="model == 2"> 打招呼</div>
<!-- <div class="bottom_t"></div> -->
        <van-popup v-model="showreply">
            <div class="reply">
                <span class='reply_title'>回复</span>
                <input type="text" class="reply_input">
                <div class="bottom_btn">
                    <div class="bottom_btn_left" @click="showreply= false">取消</div>
                    <div class="bottom_line"></div>
                    <div class="bottom_btn_right" @click="sent"> 发送</div>
                </div>
            </div>
        </van-popup>
         <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
    </div>
</template>
<script>
import topNav from "@/components/return"
export default {
components: {
    topNav
  },
  data(){
 return {
     model:1,
     showreply:false,
     show:false,
         actions:[{name:'投诉',id:1},
         ]
 }
  },
  methods:{
      onSelect(item){
    if(item.id == 1){
       this.skips('/tousu') 
    }
      },
      skips(path){
          console.log('hahhahah')
      this.$router.push({path:path})
      },
      showMode(){
          this.show = true
          console.log('hahhahah')
      },
      sent(){
          this.showreply = false
      }
  }
}
</script>
<style  scoped>
.bg{
    /* background: #e3e4e5;
    height: 100vh; */
}
.disfja_cent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.heardimg{
    width: 60px;
    height: 60px;
}
.disfja_cent span{
    margin: 10px 0;
    font-weight: 600;
}
.disfja_rba{
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#8B8B8B;
    font-size: 12px;
    margin: 0 20px 10px 20px;
}
.disfja_rca{
     display: flex;
    justify-content: center;
    align-items: center;
}
.disfja_rca span{
    margin:  10px;
    color: #646E81;
    font-size: 14px;
}
.verif_box{
    height: 50px;
    margin: 0 20px;
    background: #F8F8F8;
    border: 1px solid #797979;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}
.verif_box div{
    color: #898989;
     margin-bottom: 5px;
     font-size: 14px;
}
.verif_box span{
   font-size: 14px;
    color: #586675;
}
.life_box{
    position: relative;
    display: flex;
align-items: center;
padding: 0 20px;
height: 60px;
border-top: 10px solid #e3e4e5;
border-bottom: 1px solid #e3e4e5;

}
.more_icon{
    position: absolute;
    top: 20px;
    right: 20px;
}
.life_box span{
    width: 80px;
}
.life_img img{
    width:40px;
    height: 40px;
    margin-right: 2px;
}
.list_box{
    position: relative;
    display: flex;
align-items: center;
padding: 0 20px;
height: 50px;
border-bottom: 1px solid #e3e4e5;
}
.jub{
    justify-content: space-between;
}
.title{
width: 80px;
}
.conter{
    color: #8B8B8B;
}
.bott_box{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    width: 100%;
    color: #536882;
    border-top: 20px solid #e3e4e5 ;
    border-bottom: 40px solid #e3e4e5 ;
}
.reply{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 280px;
   
}
.bottom_btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.reply_title{
    font-size: 18px;
    font-weight: 600;
    height: 30px;
    margin: 10px 0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.reply_input{
    border: none;
    outline: none;
    background: #F4F4F4;
    width: 250px;
    height: 40px;
    margin-bottom: 20px;
}
.van-popup {
    position: fixed;
     border-radius: 10px;
    max-height: 100%;
    overflow-y: auto;
    background-color: #fff;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    -webkit-overflow-scrolling: touch;
}
.van-popup--center {
    top: 40%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}
.bottom_btn{
    width: 100%;
    border-top: 1px solid #e3e4e5;
}
.bottom_btn_left{
width: 50%;
text-align: center;
height: 50px;
line-height: 50px;
font-weight: 600;

}
.bottom_line{
    width: 1px;
    height: 50px;
    background: #e3e4e5;
}
.bottom_btn_right{
width: 50%;
text-align: center;
line-height: 50px;
color: #7D8BA2;
height: 50px;
font-weight: 600;
}
.border_top{
    border-top: 1px solid #e3e4e5;
}
.bottom_t{
    background: #e3e4e5;
    min-height: 10px;
}
</style>